<template>
  <t-tooltip :content="help" :trigger="cpTooltipTrigger">
    <t-select
    v-model="valueThis"
    :filterable="getPropValue('filterable', true)"
    :clearable="getPropValue('clearable', true)"
    class="custom-select"
    @change="change"
    :readonly="readonly"
    :disabled="disabled"
    ref="controlInst"
    @focus="_focus"
    :filter="_filter"
    @popup-visible-change="_onPopupVisibleChange"
    >
      <t-option
        v-for="(item, index) in cpOptions"
        :key="uuid + index"
        :label="item[getPropValue('label', 'label')]"
        :value="item[getPropValue('value', 'value')]"
        :disabled="item.disabled"
      >
        <span v-html="item[getPropValue('labelShow', getPropValue('label', 'label'))]" :style="getItemStyle(item)"></span>
      </t-option>
    </t-select>
  </t-tooltip>
</template>

<script>

export default {
  desc: '自定义下拉框',
  name: 'customSelect',
  props: {
    /**
     * @Description：上级页面对象
     * @Date 2023-10-10
     */
    parent: {
      type: Object,
      default: () => {},
    },
    /**
     * @Description：上级表单对象
     * @Date 2023-10-10
     */
    form: {
      type: Object,
      default: () => {},
    },
    /**
     * @Description：输入提示信息
     * @Date 2023-10-10
     */
    help: {
      type: String,
      default: () => '',
    },
    /**
     * @Description：只读
     * @Date 2023-10-10
     */
    readonly: {
      type: Boolean,
      default: () => false,
    },
    /**
     * @Description：禁用
     * @Date 2023-10-10
     */
    disabled: {
      type: Boolean,
      default: () => false,
    },
  },
  created() {
    this.bindFormItemProp()
  },
  data() {
    return {
      valueThis: null,

      // 表单配置
      formItemProp: {
        name: '',
        label: '',
      },

      uuid: global.utils.uuid,
      valueSearch: ''
    }
  },
  methods: {
    // 值变化更新表单值
    change() {
      this.parent.$set(this.form, this.formItemProp.name, this.valueThis)

      let name = this.formItemProp.name
      let valueField = this.getPropValue('value', 'value')
      let selectItemIndex = this.getPropValue('options', []).findIndex((tmp) => tmp[name] == this.valueThis || tmp[valueField] == this.valueThis)
      let selectItem = null
      if (selectItemIndex != -1) {
        selectItem = this.getPropValue('options', [])[selectItemIndex]
      }
      this.$emit('change', this.valueThis, selectItem)
    },

    /**
     * @Description：获取属性值
     * @Author wyt
     * @Date 2023-09-27
     */
    getPropValue(name, defaultValue) {
      if (this.$attrs && this.strings.isNotBlank(this.$attrs[name])) {
        return this.$attrs[name]
      }
      return defaultValue
    },
    /**
     * @Description：获取表单配置
     * @Author wyt
     * @Date 2023-09-27
     */
    bindFormItemProp() {
      if (!this.$parent.$options || !this.$parent.$options.propsData) {
        console.error('字段未找到表单项，请检查')
        return false
      }
      this.formItemProp = {
        name: this.$parent.$options.propsData.name,
        label: this.$parent.$options.propsData.label,
      }

      if (!this.formItemProp.name) {
        return false
      }
      if (!this.formItemProp.label) {
        return false
      }
    },

    getItemStyle(item) {
      let style = {}
      if (item.color) {
        style.color = item.color
        // style.fontWeight = '600'
      }
      return style
    },
    /**
     * @Description：聚焦事件，使当前组件聚焦
     * @Author wyt
     * @Date 2023-09-27
     */
    _focus() {
      this.$emit('focus')
    },
    /**
     * @Description：聚焦事件，使当前组件聚焦
     * @Author wyt
     * @Date 2023-09-27
     */
    focus() {
      this.$refs.controlInst.setInnerPopupVisible(true)
      $(this.$refs.controlInst.$el).find('.t-input__inner').focus()
    },
    _filter(search, option) {
      let searchL = search.toLowerCase()
      this.valueSearch = searchL
      return option.label.toLowerCase().indexOf(searchL) != -1
        || this.pyutils.getAllFirstLetter(option.label).toLowerCase().indexOf(searchL) != -1
        || this.pyutils.chineseToPinYin(option.label).toLowerCase().indexOf(searchL) != -1
    },

    _onPopupVisibleChange(isShow) {
      if (!isShow) {
        setTimeout(() => {
          this.valueSearch = ''
        }, 1000)
      }
    }
  },
  watch: {
    // 监听表单设置本组件的值
    form: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        this.valueThis = this.form[this.formItemProp.name]
      },
    },
  },
  computed: {
    cpTooltipTrigger() {
      return this.strings.isBlank(this.help) ? '' : 'hover'
    },
    cpOptions() {
      let options = this.getPropValue('options', [])
      if (this.strings.isBlank(this.valueSearch)) {
        return options
      }
      return options.filter(option => {
        return option.label.toLowerCase().indexOf(this.valueSearch) != -1
          || this.pyutils.getAllFirstLetter(option.label).toLowerCase().indexOf(this.valueSearch) != -1
          || this.pyutils.chineseToPinYin(option.label).toLowerCase().indexOf(this.valueSearch) != -1
      })
    }
  },
}
</script>

<style lang="scss">
  .t-select__dropdown{
    z-index: 9999999999;
  }
</style>
